<template>
    <div class="jianzhan-content">
        <Crumb name="出库"/>
        <div class="content">
            <Search>
                <el-date-picker size="small"
                                :start-placeholder="$t('invoice.startTime')"
                                :end-placeholder="$t('invoice.endTime')"
                                type="datetimerange"
                                v-model="time"
                                value-format="yyyy-MM-dd"> </el-date-picker>
                <el-select v-model="belongModules" placeholder="Please Select Location" size="small">
                    <el-option
                            v-if="urlAvailible('shanqi/mor')"
                            label="Warehouse2"
                            value="1">
                    </el-option>
                    <el-option
                            v-if="urlAvailible('shanqi/weda')"
                            label="Weda"
                            value="2"
                    ></el-option>
                    <el-option
                            v-if="urlAvailible('shanqi/all')"
                            label="All"
                            value=""
                    ></el-option>
                </el-select>
                <el-input
                        v-model="stockOutNum"
                        class="input"
                        size="small"
                        prefix-icon="el-icon-search"
                        placeholder="输入出库单号"/>
                <el-input
                        v-model="key"
                        class="input"
                        size="small"
                        prefix-icon="el-icon-search"
                        placeholder="输入配件编号"/>
                <el-input
                        v-model="key1"
                        class="input"
                        size="small"
                        prefix-icon="el-icon-search"
                        placeholder="输入配件名称"/>
                <el-button type="primary" @click="search" style="display: inline-block" size="small"
                           icon="el-icon-search">搜索
                </el-button>
                <div style="margin-top: 10px;">
                    <el-button icon="el-icon-download" type="primary" @click="download" size="small">下载合并
                    </el-button>
                    <el-button icon="el-icon-download" type="primary" @click="sub1" size="small">下载详情
                    </el-button>
                </div>

            </Search>

            <div class="table-wrapper">
                <el-table border
                          @expand-change="getPartDetail"
                          stripe
                          row-key="id"
                          :data="stockList"
                >
                    <el-table-column label="出库单号" prop="stockOutNum"/>
                    <el-table-column label="出库日期" prop="stockOutDateStr"/>
                    <el-table-column label="配件编号" prop="partsNumber"/>
                    <el-table-column label="配件名称（中／英）" width="450px">
                        <template slot-scope="stock">
                            <span>{{stock.row.denomination}}/{{stock.row.designation}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="申请数量" prop="applyQuantity"/>
                    <el-table-column label="出库数量" prop="partsQuantity"/>
                    <el-table-column label="库存" prop="quantity"/>
                    <el-table-column label="安全库存"/>
                    <el-table-column label="采购价格" prop="purchasePrice"/>

                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"/>
                </div>
            </div>
            <el-dialog
                    title="下载"
                    :visible.sync="downloadDialog"
                    width="50%"
            >
                <el-form label-width="180px">
                    <el-form-item :label="$t('customer')">
                        <el-select v-model="customer" placeholder="客户">
                            <el-option
                                    v-for="item in customerList"
                                    :key="item.id"
                                    :label="item.customerName"
                                    :value="item.customerName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择年份">
                        <el-date-picker v-model="year" type="year" placeholder="年份"
                                        value-format="yyyy"></el-date-picker>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="downloadDialog = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="sub">{{$t('download')}}</el-button>
              </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import Search from '../../components/common/search'
    import {baseURL} from "../../util";
    import {getStockOutDetail} from "../../api/contract";
    import {ERROR_OK} from "../../util/config";
    import mixins from '../../util/mixins'
    import spMixins from '../../util/spMixins'
    import authMixins from "../../util/authMixins";
    import {getSpecCustomer} from "../../api/customer";

    export default {
        name: "stock-out",
        mixins: [mixins, spMixins, authMixins],
        data() {
            return {
                year: '',
                belongModules: '1',
                list: [],
                time:['',''],
                workNoList: [],
                downloadDialog: false,
                rule: {
                    stockOutNum: [{required: true}],
                    customer: [{required: true}],
                    receiver: [{required: true}],
                    stockOutDateStr: [{required: true}],
                    applyType: [{required: true}],
                    workOrderNo: [{required: true}],
                    salesOrderNum: [{required: true}],
                    stockOutDetails: [{required: true}],
                    warehouse: [{required: true}],
                },
                stock: {
                    stockOutNum: '',
                    warehouse: '',
                    customer: '',
                    receiver: '',
                    stockOutDateStr: '',
                    applyType: '',
                    workOrderNo: '',
                    salesOrderNum: '',
                    stockOutDetails: []
                },
                customerList:[],
                customer:'',
                stockOutNum: '',
                key: '',
                key1: '',
                dialogVisible: false,
                editable: true
            }
        },
        computed: {
            stockList() {
                return this.list
            }
        },
        created() {
            this._getStockOutList();
            this.getSpecCustomer()
        },
        methods: {
            async getSpecCustomer() {
                const {status, data} = await getSpecCustomer();
                if (status === 0) {
                    this.customerList = data;
                }
            },
            download() {
                this.downloadDialog = true;
                // window.open(baseURL + `/statistical_report/export_excel_shan_qi.file?startTime=${this.startDate}&endTime=${this.endDate}&partsNumber=${this.key}&belongModule=${this.belongModules}`);
            },
            sub1() {
                const startDate = this.time[0];
                const endDate = this.time[1]
                window.open(baseURL + `/statistical_report/export_excel_shan_qi.file?startTime=${startDate}&endTime=${endDate}&partsNumber=${this.key}&belongModule=${this.belongModules}&warehouse=1`);
            },
            sub() {
                if (this.year) {
                    window.open(baseURL + `/spare_parts/manage/export_stock_out_by_month_and_parts.file?year=${this.year}&customer=${this.customer}&belongModule=${this.belongModules}&warehouse=1`)
                    this.year = '';
                    this.customer = ''
                    this.downloadDialog = false
                } else {
                    this.$message.error('请选择年份')
                }
            },
            changePage(page) {
                this.pageNum = page;
                this._getStockOutList();
            },
            async _getStockOutList() {
                const {status, data} = await getStockOutDetail({
                    startDate: this.time[0],
                    endDate: this.time[1],
                    partsNumber: this.key,
                    description: this.key1,
                    stockOutNum: this.stockOutNum,
                    belongModule: this.belongModules,
                    pageSize: 100,
                    pageNum: this.pageNum
                });
                if (status === ERROR_OK) {
                    this.list = data.list;
                    this.total = data.total;
                    window.scrollTo(0, 0)
                } else {
                    this.list = []
                }
            },
            search() {
                this.pageNum = 1;
                this._getStockOutList();
            }
        },
        watch:{
            time(){ // 当清除的时候可以
                if (!this.time){
                    this.time = ['','']
                }
            }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";

    .content {
        @include content
    }
</style>